<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关注和登录</title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/jquery3.5.1.js"></script>
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" href="../css/attentionAndFans.css"/>
	</head>
	<body>
		<div id="app">
			<div id="listBox" class="mainBox">
				<!--标题栏-->
				<div class="listTitle">
					<div @click="showList" id="attention" style="border-bottom: 3px solid #ef5252;">关注({{attsNum}})</div>
					<div @click="showList" id="fans" style="left: 88px;font-weight: normal;">粉丝({{fansNum}})</div>
				</div>
				<!--关闭按钮-->
				<div class="listExitButton" @click="closeList">
					<i class="el-icon-close"></i>
				</div>
				<!--搜索框-->
				<div class="selInput">
					<span class="sel_normal-input__icon"><i class="el-icon-search"></i></span>
					<input type="text" placeholder="搜索用户名字或逗比号" class="sel_normal_input"/>
				</div>
				<!--主体list-->
				<div class="peopleList">
					<!--关注列表-->
					<div class="interest_list" v-show="interestList">
						<ul>
							<li v-for="att in findAttList" :key="att.id">
								<div @click="clickHrfe(att,1)" class="listBox">
									<input type="hidden" :value="att.userFriend"/>
									<span style="line-height: 135px;">
										<img :src="att.userinfo.headImg" width="65px" height="65px" style="object-fit: cover; flex: 1; border-radius: 50%;"/>
									</span>
									<br />
									<span class="list_username">{{att.userinfo.userName}}</span>
									<span class="list_signature">{{att.userinfo.synopsis==null?'暂无签名':att.userinfo.synopsis}}</span>
									<button class="list_normal_button">{{att.status==4?'互相关注':'已关注'}}</button>
								</div>
							</li>
						</ul>
						<div class="list_bottom_msg">暂时没有更多了</div>
					</div>
					<!--粉丝列表-->
					<div class="fans_list" v-show="fansList">
						<ul>
							<li v-for="fan in findFansList" :key="fan.id">
								<div class="listBox">
									<span style="line-height: 135px;">
										<img @click="clickHrfe(fan,0)" :src="fan.userinfo.headImg" width="65px" height="65px" style="object-fit: cover; flex: 1; border-radius: 50%;"/>
									</span>
									<br />
									<span class="list_username">{{fan.userinfo.userName}}</span>
									<span class="list_signature">{{fan.userinfo.synopsis==null?'暂无签名':fan.userinfo.synopsis}}</span>
									<button :class="[fan.status==4?'list_normal_button_eachFans':'fans_button']">{{fan.status==4?'互相关注':'回关'}}</button>
									<button class="list_normal_button_del">移除</button>
								</div>
							</li>
						</ul>
						<div class="list_bottom_msg">暂时没有更多了</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
				el: "#app",
				data: {
					attsNum:0,
					fansNum:0,
					findAttList:[],
					findFansList:[],
					fansList:false,
					interestList:true,
				},
				methods: {
					clickHrfe(fen,att){
						if(att==1){
							window.localStorage.setItem("userIdOther",fen.userFriend);
						}else{
							window.localStorage.setItem("userIdOther",fen.userId);
						}
						console.log(fen)
						location.href="attention.html"
					},
					//关注和粉丝
					showList(){
						if(event.currentTarget.id=="attention"){
							this.interestList=true
							this.fansList=false
						}else{
							this.interestList=false
							this.fansList=true
						}
					},
					closeList(){
						$("#listBox").css("display","none")
						location.href="mine.html"
					}
				},
				mounted(){
					this.attsNum=localStorage.getItem("attsNum")
					this.fansNum=localStorage.getItem("fansNum")
					this.findAttList=JSON.parse(localStorage.getItem("findAttList"))
					this.findFansList=JSON.parse(localStorage.getItem("findFansList"))
					if(localStorage.getItem("title")=="关注"){
						$(".listTitle div").css("font-weight","normal")
						$(".listTitle div").css("border-bottom","")
						$("#attention").css("font-weight","bolder")
						$("#attention").css("border-bottom","3px solid #ef5252")
						this.interestList=true
						this.fansList=false
					}else{
						$(".listTitle div").css("font-weight","normal")
						$(".listTitle div").css("border-bottom","")
						$("#fans").css("font-weight","bolder")
						$("#fans").css("border-bottom","3px solid #ef5252")
						this.interestList=false
						this.fansList=true
					}
				}
			})
	</script>
	<script type="text/javascript">
		let userid=window.localStorage.getItem("userid");
		$(".listTitle div").click(function(){
			$(".listTitle div").css("font-weight","normal")
			$(".listTitle div").css("border-bottom","")
			$(this).css("font-weight","bolder")
			$(this).css("border-bottom","3px solid #ef5252")
		})
		
		$("#listBox button").click(function(){
			let chose=event.currentTarget.innerHTML
			if(chose=="已关注"){
				//获取点击对象id
				var fid=$(this).parent().find("input").val()
				//从数据库删除关注
				delinterst(userid,fid)
				$(this).attr("class","fans_button")
				$(this).css("left","354px")
				$(this).html("关注")
			}else if(chose=="回关"){
				//获取点击对象id
				var fid=$(this).parent().find("input").val()
				//添加到数据库
				addinterest(userid,fid)
				let a=$(this).parent().parent().parent().parent().attr("class")
				if(a==="fans_list"){//样式。。
					$(this).attr("class","list_normal_button_eachFans")
					$(this).css("left","250px")
					$(this).html("互相关注")
				}else{
					$(this).attr("class","list_normal_button_eachFans")
					$(this).html("互相关注")
				}
			}else if(chose=="互相关注"){
				//获取点击对象id
				var fid=$(this).parent().find("input").val()
				//从数据库删除关注
				delinterst(userid,fid)
				let a=$(this).parent().parent().parent().parent().attr("class")
				if(a==="fans_list"){
					$(this).attr("class","fans_button")
					$(this).html("回关")
				}else{
					$(this).attr("class","fans_button")
					$(this).css("left","354px")
					$(this).html("回关")
				}
			}else if(chose=="关注"){
				//获取点击对象id
				var fid=$(this).parent().find("input").val()
				//添加到数据库
				addinterest(userid,fid)
				let a=$(this).parent().parent().parent().parent().attr("class")
				if(a==="fans_list"){
					$(this).attr("class","list_normal_button")
					$(this).html("已关注")
				}else{
					$(this).attr("class","list_normal_button")
					$(this).css("left","354px")
					$(this).html("已关注")
				}
			}else{
				if(confirm("你确定要移除此粉丝吗，你的动态他(她)将不再收到提示")){
					//移除粉丝对我的关注
					//获取点击对象id
					var fid=$(this).parent().find("input").val()
					//从数据库删除关注
					delinterst(fid,userid)
					$(this).parent().parent().remove()
				}
			}
		})
		
		//添加关注方法
		function addinterest(uid,fid){
			axios.post('http://localhost:8080/doubi/addInterest',{
				userId:uid,
				userFriend:fid,
				status:0,
			}).then(response => {
				
			}).catch(error => {
				console.error(error);
			});
		}
		
		//取消关注方法
		function delinterst(uid,fid){
			axios.post('http://localhost:8080/doubi/delInterest',{
				userId:uid,
				userFriend:fid,
				status:0,
			}).then(response => {
				
			}).catch(error => {
				console.error(error);
			});
		}
		
		
	</script>
</html>